<!-- <4-1></4-1>
<template>
  <div>
    <count-com></count-com>
    <count-com/>
  </div>
</template>
<script></script>
<style scoped></style> -->

<!-- <4-2></4-2>
<template>
  <div>
    <NumberCom>
    </NumberCom>
  </div>
</template>
<script>
// 导入局部组件对象
import NumberCom from './components/NumberCom.vue'
export default {   // 导出当前的单文件组件，供外部文件使用
  // 注册局部组件
  components:{
    NumberCom
  },
}
</script>
<style scoped></style> -->

<!--4-3
App.vue:
<template>
  <div>
    <HelloCom name="LHP"></HelloCom>
    <HelloCom name="Lily"></HelloCom>
    <HelloCom name="Bob"></HelloCom>
  </div>
</template>
<script>
import HelloCom from './HelloCom.vue';
export default{
  components:{
    HelloCom,
  },
};
</script>
<style scoped></style>-->

<!-- 4-4
 <template>
  <div>
    <input type="radio" v-model="activeComponent" value="ActiveCom1"/>ActiveCom1
    <input type="radio" v-model="activeComponent" value="ActiveCom2"/>ActiveCom2
    <component :is="activeComponent"></component>
  </div>
 </template>
 <script>
import ActiveCom1 from './ActiveCom1.vue';
import ActiveCom2 from './ActiveCom2.vue';
export default{
  data(){
    return{
      activeComponent:"ActiveCom2",
    };
  },
  components:{
    ActiveCom1,
    ActiveCom2,
  }
};
</script>
<style scoped></style> -->

<!-- 4-5
<template>
  <div>
    <Suspense>
      <template v-slot:default>
        <AsyncCom></AsyncCom>
      </template>
      <template v-slot:fallback>
        <h2>LOADING......</h2>
      </template>
    </Suspense>
  </div>
</template>
<script>
import {defineAsyncComponent} from'vue'
const AsyncCom=defineAsyncComponent(
  ()=>import("./HelloCom2.vue")
)
export default{
  components:{
    AsyncCom
  }
}
</script>
<style scoped></style> -->

<!-- 4-6 -->
<!-- <template>
  <div>
    <button @click="currentTab='Tab1'">音乐</button>
    <button @click="currentTab='Tab2'">视频</button>
    <button @click="currentTab='Tab3'">新闻</button>
    <keep-alive>
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</template>
<script>
import ChildCom from "./components/ChildCom.vue";
import Tab1 from "./components/TabCom1.vue";
import Tab2 from "./components/TabCom2.vue";
import Tab3 from "./components/TabCom3.vue";
export default{
  data(){
    return{
      currentTab:"Tab1",
    };
  },
  components:{
    Tab1,
    Tab2,
    Tab3,
  },
};
</script> -->

<!-- 4-7
 <template>
  <div>
    <ChildCom msg="Hell,I am dad!"></ChildCom>
  </div>
 </template>
 <script>
 import ChildCom from "./components/ChildCom.vue"
 export default {
  components:{
    ChildCom
  }
 };
</script>
<style scoped>
</style> -->

<!-- 4-8
 <template>
  <div>
    <ChildCom1 :name="name" :age="age"></ChildCom1>
  </div>
 </template>
 <script>
import ChildCom1 from './components/ChildCom1.vue';
 export default {
  data() {
    return {
      name:'Jim',
      age:[],
      gender:'',
      hobby:[]
    }
  },
  components:{
    ChildCom1
  }
 };
</script>
<style scoped></style> -->

<!-- 4-8-1
<template>
  <div>
    <mycom1 :parentMsg="msg"></mycom1>
  </div>
</template>
<script>
import mycom1 from"./components/MyCom1.vue"
export default {
  data() {
    return {
      msg:'父组件的msg'
    }
  },
  components:{
    mycom1
  }
};
</script>
<style scoped></style> -->

<!-- 4-8-2
<template>
  <div>
    <mycom2 :childWidth="width"></mycom2>
  </div>
</template>
<script>
import mycom2 from "./components/MyCom2.vue"
export default{
  data() {
    return {
      width:400
    }
  },
  components:{
    mycom2
  }
};
</script>
<style scoped></style> -->

<!-- 4-8组合
 <template>
  <div>
    <ChildCom :name="name" :age="age"></ChildCom>
    <mycom1 :parentMsg="msg"></mycom1>
    <mycom2 :childWidth="width"></mycom2>
  </div>
 </template>
 <script>
 import ChildCom from './components/ChildCom.vue'
 import mycom1 from"./components/MyCom1.vue"
 import mycom2 from "./components/MyCom2.vue"
 export default {
  data() {
    return {
      name:"Jim",
      age:[],
      gender:"",
      hobby:[],
      width:400,
      msg:"父组件的msg"
    }
  },
  components:{
    ChildCom,
    mycom1,
    mycom2
  }
 }
</script> -->

<!-- 4-9
<template>
  <div>
    <ChildCom3 @score="scoreHandler"></ChildCom3>
  </div>
</template>
<script>
import ChildCom3 from './components/ChildCom3.vue';
export default{
  components:{
    ChildCom3
  },
  methods: {
    scoreHandler(arg1,arg2){
      console.log(arg1,arg2);
    }
  }
};
</script> -->

<!-- 4-10 -->
 <template>
  <div>
    <ChildCom4 ref = "childRef"></ChildCom4>
    <button @click = "sendMessage">Send Message To Child</button>
  </div>
 </template>
 <script>
 import ChildCom4 from './components/ChildCom4.vue';
 export default{
  components:{
    ChildCom4
  },
  methods: {
    sendMessage(){
      this. $refs.childRef.receiveMessage('Hello from parent');
    }
  }
 };
</script>